<template>
  <base-panel-md class="home-stats-by-usage" title="设备运行统计">
    <template #right-btn>
      <base-btn @click="active = 0" :active="active === 0">年</base-btn>
      <base-btn @click="active = 1" :active="active === 1">月</base-btn>
      <base-btn @click="active = 2" :active="active === 2">日</base-btn>
      <base-btn class="more">更多</base-btn>
    </template>
    <div class="statistical-time">
      <v-chart class="pie" :options="option" />
      <div class="text">
        <div class="online-time">30Xh</div>
        <div class="offline-time">总在/离线时长</div>
        <div class="open-times">25Xh</div>
        <div class="total-open-times">总打开次数</div>
      </div>
    </div>
  </base-panel-md>
</template>

<script>
import BasePanelMd from './BasePanelMd.vue';
import BaseBtn from './BaseBtn.vue';

const values = 55.33;

const integer = values.toFixed(2).split('.')[0];
const decimals = values.toFixed(2).split('.')[1];

export default {
  components: {
    BasePanelMd,
    BaseBtn,
  },

  data() {
    return {
      active: 0,
      angle: 0,
      value: 55.33,
    };
  },

  computed: {
    option() {
      const { angle, value, getCirlPoint } = this;
      return {
        title: [
          // {
          //   text: `{a|${value}}{c|%}`,
          //   x: 'center',
          //   y: 'center',
          //   textStyle: {
          //     rich: {
          //       a: {
          //         fontSize: this.calcSize(18),
          //         color: '#29EEF3',
          //       },

          //       c: {
          //         fontSize: this.calcSize(18),
          //         color: '#ffffff',
          //       // padding: [5,0]
          //       },
          //     },
          //   },
          // },
          {
            text: `${integer}`,
            x: '39%',
            y: 'center',
            textStyle: {
              fontSize: this.calcSize(18),
              color: '#29EEF3',
            },
          },
          {
            text: `.${decimals}%`,
            x: '45.5%',
            y: 'center',
            textStyle: {
              fontSize: this.calcSize(16),
              color: '#29EEF3',
            },
          },
          {
            text: '在离线时长比',
            left: '35%',
            top: '85.8%',
            textStyle: {
              color: '#fff',
              fontSize: this.calcSize(13),
            },
          },
        ],
        legend: {
          type: 'plain',
          orient: 'vertical',
          right: 0,
          top: '10%',
          align: 'auto',
          data: [{
            name: '涨价后没吃过',
            icon: 'circle',
          }, {
            name: '天天吃',
            icon: 'circle',
          }, {
            name: '三五天吃一次',
            icon: 'circle',
          }, {
            name: '半个月吃一次',
            icon: 'circle',
          }],
          textStyle: {
            color: 'white',
            fontSize: 16,
            padding: [10, 1, 10, 0],
          },
          selectedMode: false,
        },
        series: [{
          name: 'ring5',
          type: 'custom',
          coordinateSystem: 'none',
          renderItem(params, api) {
            return {
              type: 'arc',
              shape: {
                cx: api.getWidth() / 2,
                cy: api.getHeight() / 2,
                r: Math.min(api.getWidth(), (api.getHeight()) / 2) * 0.6,
                startAngle: ((0 + angle) * Math.PI) / 180,
                endAngle: ((90 + angle) * Math.PI) / 180,
              },
              style: {
                stroke: '#0CD3DB',
                fill: 'transparent',
                lineWidth: 1.5,
              },
              silent: true,
            };
          },
          data: [0],
        }, {
          name: 'ring5',
          type: 'custom',
          coordinateSystem: 'none',
          renderItem(params, api) {
            return {
              type: 'arc',
              shape: {
                cx: api.getWidth() / 2,
                cy: api.getHeight() / 2,
                r: Math.min(api.getWidth(), (api.getHeight()) / 2) * 0.6,
                startAngle: ((180 + angle) * Math.PI) / 180,
                endAngle: ((270 + angle) * Math.PI) / 180,
              },
              style: {
                stroke: '#0CD3DB',
                fill: 'transparent',
                lineWidth: 1.5,
              },
              silent: true,
            };
          },
          data: [0],
        }, {
          name: 'ring5',
          type: 'custom',
          coordinateSystem: 'none',
          renderItem(params, api) {
            return {
              type: 'arc',
              shape: {
                cx: api.getWidth() / 2,
                cy: api.getHeight() / 2,
                r: Math.min(api.getWidth(), (api.getHeight()) / 2) * 0.65,
                startAngle: ((270 + -angle) * Math.PI) / 180,
                endAngle: ((40 + -angle) * Math.PI) / 180,
              },
              style: {
                stroke: '#0CD3DB',
                fill: 'transparent',
                lineWidth: 1.5,
              },
              silent: true,
            };
          },
          data: [0],
        }, {
          name: 'ring5',
          type: 'custom',
          coordinateSystem: 'none',
          renderItem(params, api) {
            return {
              type: 'arc',
              shape: {
                cx: api.getWidth() / 2,
                cy: api.getHeight() / 2,
                r: Math.min(api.getWidth(), (api.getHeight()) / 2) * 0.65,
                startAngle: ((90 + -angle) * Math.PI) / 180,
                endAngle: ((220 + -angle) * Math.PI) / 180,
              },
              style: {
                stroke: '#0CD3DB',
                fill: 'transparent',
                lineWidth: 1.5,
              },
              silent: true,
            };
          },
          data: [0],
        }, {
          name: 'ring5',
          type: 'custom',
          coordinateSystem: 'none',
          renderItem(params, api) {
            const x0 = api.getWidth() / 2;
            const y0 = api.getHeight() / 2;
            const r = Math.min(api.getWidth(), (api.getHeight()) / 2) * 0.65;
            const point = getCirlPoint(x0, y0, r, (90 + -angle));
            return {
              type: 'circle',
              shape: {
                cx: point.x,
                cy: point.y,
                r: 4,
              },
              style: {
                stroke: '#0CD3DB', // 粉
                fill: '#0CD3DB',
              },
              silent: true,
            };
          },
          data: [0],
        }, {
          name: 'ring5', // 绿点
          type: 'custom',
          coordinateSystem: 'none',
          renderItem(params, api) {
            const x0 = api.getWidth() / 2;
            const y0 = api.getHeight() / 2;
            const r = Math.min(api.getWidth(), (api.getHeight()) / 2) * 0.65;
            const point = getCirlPoint(x0, y0, r, (270 + -angle));
            return {
              type: 'circle',
              shape: {
                cx: point.x,
                cy: point.y,
                r: 4,
              },
              style: {
                stroke: '#0CD3DB', // 绿
                fill: '#0CD3DB',
              },
              silent: true,
            };
          },
          data: [0],
        }, {
          name: '吃猪肉频率',
          type: 'pie',
          radius: ['58%', '45%'],
          silent: true,
          clockwise: true,
          startAngle: 90,
          z: 0,
          zlevel: 0,
          label: {
            normal: {
              position: 'center',

            },
          },
          data: [{
            value,
            name: '',
            itemStyle: {
              normal: {
                color: { // 完成的圆环的颜色
                  colorStops: [{
                    offset: 0,
                    color: '#4FADFD', // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#28E8FA', // 100% 处的颜色
                  }],
                },
              },
            },
          },
          {
            value: 100 - value,
            name: '',
            label: {
              normal: {
                show: false,
              },
            },
            itemStyle: {
              normal: {
                color: '#173164',
              },
            },
          },
          ],
        },

        {
          name: '',
          type: 'gauge',
          radius: '58%',
          center: ['50%', '50%'],
          startAngle: 0,
          endAngle: 359.9,
          splitNumber: 8,
          hoverAnimation: true,
          axisTick: {
            show: false,
          },
          splitLine: {
            length: 60,
            lineStyle: {
              width: 1,
              color: '#061740',
            },
          },
          axisLabel: {
            show: false,
          },
          pointer: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              opacity: 0,
            },
          },
          detail: {
            show: false,
          },
          data: [{
            value: 0,
            name: '',
          }],
        },

        ],
      };
    },
  },

  created() {
    setInterval(() => {
      this.draw();
    }, 100);
  },

  methods: {
    getCirlPoint(x0, y0, r, ang) {
      const x1 = x0 + r * Math.cos((ang * Math.PI) / 180);
      const y1 = y0 + r * Math.sin((ang * Math.PI) / 180);
      return {
        x: x1,
        y: y1,
      };
    },
    calcSize(num) {
      return (document.documentElement.clientWidth / 1920) * num;
    },

    draw() {
      this.angle += 3;
      // window.requestAnimationFrame(draw);
    },
  },
};
</script>

<style lang="scss" scoped>
.home-stats-by-usage {
  height: 25.278vh;
}

.more {
  color: #46c8cc;
  text-decoration: underline;
  // margin-left: 1vw;
}

.pie {
  width: 75%;
  height: 100%;
  flex-shrink: 0;
  position: relative;
  top: -2vh;
}

.statistical-time {
  display: flex;
  // justify-content: space-between;
  height: 100%;
}

.online-time {
  color: #3af6a4;
  font-size: 1.5vw;
}

.offline-time {
  font-size: 0.7vw;
}

.open-times {
  color: #ffda7b;
  font-size: 1.5vw;
}

.total-open-times{
  font-size: 0.7vw;
}

.text{
  display: flex;
  flex-direction: column;
  text-align: center;
  line-height: 3.5vh;
  margin-top: 2vh;
}
</style>
